<html>
<head>
    <title>Smart Editor - Yahoo Hackday India hack</title>
    <!-- Skin CSS file -->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/assets/skins/sam/skin.css">
    <style type="text/css">
        #searchResults{font-size:.7em;font-family:verdana,helvetica,sans-serif;border:1px solid #dfdfdf;width:400px;padding-right:10px;}
        #searchResults ul{padding-top:6px;margin-top:0px;}
        #asch{width:200px;}
        #searchResults li{padding-top:4px;}
    </style>
    <style type="text/css">
    .res{
        /*font-family: "Verdana", sans-serif;*/
        font-family:'Verdana','Arial','Helvetica',sans-serif;
        font-size:12px;
        padding:5px 0;
    }
    .container{
        padding:5px;
        width:255px;
        display:none;
        /*border:1px dashed #cccccc;*/
    }
    </style>

    <!-- Utility Dependencies -->
    <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/element/element-beta-min.js"></script>

    <!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
    <script src="http://yui.yahooapis.com/2.3.1/build/container/container_core-min.js"></script>
    <script src="http://yui.yahooapis.com/2.3.1/build/menu/menu-min.js"></script>
    <script src="http://yui.yahooapis.com/2.3.1/build/button/button-beta-min.js"></script>
    <script src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script src="http://yui.yahooapis.com/2.3.1/build/animation/animation-min.js"></script>

    <!-- Source file for Rich Text Editor-->
    <script src="http://yui.yahooapis.com/2.3.1/build/editor/editor-beta-min.js"></script>
    <script type="text/javascript" src="smart.js"> </script>
</head>
<body class="yui-skin-sam">
<h2>Smart Editor</h2>
<table width=100%>
<tr>
    <td valign=top width=390px>
        <p>
        This editor is smart! Smarter than you, I bet!
            It will show you information you might be looking for, as you type.
        It gets <b>web search results</b> to inform you about related stuff on the net, <b>related news</b> happening around the world, <b>Flickr photos</b> to help you visualize, and <b>amazon recommendations</b> to checkout books or other stuff on the topic!
        </p>

<textarea name="msgpost" style="float:left; " id="msgpost" cols="50" rows="10" >

</textarea>
<script type="text/javascript">
    var myEditor = new YAHOO.widget.Editor('msgpost', {
        height: '250px',
        width: '385px',
        dompath: false,
        animate: true,
        toolbar: {
//            titlebar: '<span style="float:left">SmartEditor</span><span style="float:right"><a href="javascript:void(0)" onclick="clearAll()">clear</a></span><div style="clear:both"></div>',
            titlebar: "<table width=80%><tr><td><b>Smart Editor</b></td><td align=right><a href='javascript:void(0)' onclick='clearAll()'>clear</a></td></tr></table>",
            buttons: [
            { group: 'textstyle', label: "",
                buttons: [
                { type: 'push', label: 'Bold', value: 'bold' },
                { type: 'push', label: 'Italic', value: 'italic' },
                { type: 'push', label: 'Underline', value: 'underline' }
                ]
            }
            ]
        }
    });

    var wasContentChanged = false;
    var previousContent = "";

    function onContentChange() {
        var currentContent = myEditor.getEditorHTML();
        if (wasContentChanged && previousContent != currentContent) {
            previousContent = currentContent;
            wasContentChanged = false;
            updateSmartStuff(currentContent);
//            amazonSearch("Sex and the city");
        }
    }

    var timeoutId;
    myEditor.on('editorKeyDown', function() {
        wasContentChanged = true;
         if (timeoutId) {
            clearTimeout(timeoutId);
            timeoutId = null;
        }
        timeoutId = setTimeout("onContentChange()", 800);
    }, myEditor, true);
    myEditor.render();
</script>
    </td>
    <td valign=top style='border:1px dashed #aaaaaa'>
        <b>Related Stuff</b>
        <div id="web" style="float:left" class=container>
            <b>Web</b>
            <div id="web_0" class="res"></div>
            <div id="web_1" class="res"></div>
            <div id="web_2" class="res"></div>
            <!--<div id="searchResults"></div>-->
        </div>
        <div id="news" style="float:left" class=container>
            <b>News</b>
            <div id="news_0" class="res"></div>
            <div id="news_1" class="res"></div>
            <div id="news_2" class="res"></div>
        </div>
        <div id="amzn" style="float:left; clear:both" class=container>
            <b>Recommendations From Amazon</b>
            <div id="amzn_0" class="res"></div>
            <div id="amzn_1" class="res"></div>
            <div id="amzn_2" class="res"></div>
        </div>
        <div id="flickr" style="float:left;" class=container>
            <b>Flickr Photos</b>
            <table cellpadding=2 cellspacing=2><tr>
            <td><div id="flickr_0" class="res"></div></td>
            <td><div id="flickr_1" class="res"></div></td>
                </tr><tr>
            <td><div id="flickr_2" class="res"></div></td>
            <td><div id="flickr_3" class="res"></div></td>
            </tr></table>
        </div>
    </td>
</tr>
</table>
<p>Yahoo Hackday India hack by <a target=_new href="http://www.madhusudhan.info">Madhusudhan Rao</a> and <a target=_new href="http://www.cse.iitb.ac.in/~jeetu">Jeetendra Mirchandani</a>
</p>
</body>
</html>

